<template>
  <div>
    <div class="nav-header">
      <h1>导航栏</h1>
      <button class="icon-button" @click="nav_setting">
        <i class="el-icon-setting"></i>
      </button>
    </div>

    <el-dialog title="设置" :visible.sync="locaoVisible">
      <!-- 分类列表原生表格 -->
      <table
        class="custom-table"
        style="width: 100%; margin-bottom: 20px; border-collapse: collapse"
      >
        <thead>
          <tr>
            <th style="border: 1px solid #ddd; padding: 8px">分类名称</th>
            <th style="border: 1px solid #ddd; padding: 8px">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="category in category_list" :key="category.id">
            <td style="border: 1px solid #ddd; padding: 8px">
              {{ category.category }}
            </td>
            <td style="border: 1px solid #ddd; padding: 8px">
              <el-button
                size="small"
                type="danger"
                @click="category_cell(category.id)"
                >删除</el-button
              >
            </td>
          </tr>
          <tr v-if="category_list.length === 0">
            <td colspan="2" style="text-align: center; padding: 10px">
              暂无分类数据
            </td>
          </tr>
        </tbody>
      </table>

      <!-- 资源列表原生表格 -->
      <table
        class="custom-table"
        style="width: 100%; border-collapse: collapse"
      >
        <thead>
          <tr>
            <th style="border: 1px solid #ddd; padding: 8px">资源名称</th>
            <th style="border: 1px solid #ddd; padding: 8px">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="link in link_list" :key="link.id">
            <td style="border: 1px solid #ddd; padding: 8px">
              {{ link.nav_title }}
            </td>
            <td style="border: 1px solid #ddd; padding: 8px">
              <el-button size="small" type="danger" @click="link_cell(link.id)"
                >删除</el-button
              >
            </td>
          </tr>
          <tr v-if="link_list.length === 0">
            <td colspan="2" style="text-align: center; padding: 10px">
              暂无资源数据
            </td>
          </tr>
        </tbody>
      </table>
    </el-dialog>
  </div>
</template>

<script>
import {
  get_category_list,
  get_link_list,
  delete_category,
  delete_link,
} from "@/api/home/nav";

export default {
  name: "HeaderComponent",
  data() {
    return {
      moonIcon: true,
      locaoVisible: false,
      category_list: [],
      link_list: [],
    };
  },
  methods: {
    switchIcon() {
      this.moonIcon = !this.moonIcon;
    },
    async nav_setting() {
      this.locaoVisible = true;
      const category_res = await get_category_list();
      this.category_list = category_res.data || [];

      const link_res = await get_link_list();
      this.link_list = link_res.data || [];
    },
    async category_cell(id) {
      await delete_category(id);
      const category_res = await get_category_list();
      this.category_list = category_res.data || [];
      const link_res = await get_link_list();
      this.link_list = link_res.data || [];
    },
    async link_cell(id) {
      await delete_link(id);
      const link_res = await get_link_list();
      this.link_list = link_res.data || [];
    },
  },
};
</script>

<style lang="scss">
.nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  .icon-button {
    cursor: pointer;
    i {
      font-size: 30px;
    }
  }
}

.custom-table {
  border: 1px solid #ddd;
  width: 100%;
  border-collapse: collapse;
}

.custom-table th,
.custom-table td {
  border: 1px solid #ddd;
  padding: 8px;
}

.cell {
  padding: 0;
}
</style>
